@charset "utf-8";

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}
*{
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "微软雅黑";
}
.clear{
    clear: both;
}
html,body,.web{
    width: 100%;
    height: 100%;
}
.music{
    position: fixed;
    right: vw(10);
    top: vw(10);
    width:vw(50);
    height: vw(50);
    z-index: 999;
    border-radius: 100%;
    img{
        width: 100%;
        height: 100%;
    }
}

@keyframes yuan{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.swiper-container{
    width: 100%;
    height: 100%;
}
.page{
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: vw(50);
}
.page1{
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 0;
    font-size: 0;
    background: url(../img/page1_bgr.jpg);
    background-size: 100% 100%;
    .font1{
        position: relative;
        margin-top: vw(81);
        margin-left: vw(90);
        height:vw(77);
        width:vw(464);
        background: url(../img/page1_title.png);
        background-size: 100% 100%;
         h1{
            font-size: vw(30);
            text-align: center;
            line-height: vw(77);
            color: #539dd5;
            letter-spacing: vw(8);
            font-weight: normal;
        }
    }
    .page1-li{
        width: vw(453);
        height: vw(333);
        margin-top: vw(23);
        margin-left: vw(99);
        box-sizing: content-box;
        .page1-li1{
            width: vw(453);
            height: vw(333);
            transform-style: preserve-3d;
            transition: 0.5s;
            -webkit-transition:0.5s;
            position: relative;
            li{
                position: absolute;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                list-style: none;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
             li:first-child{
                transform: translateZ(-110px);
            }
            li:nth-child(2){
                transform: translateY(-110px) rotateX(90deg);
            }
            li:nth-child(3){
                transform: translateY(110px) rotateX(90deg);
            }
            li:nth-child(4){
                transform: translateX(-110px) rotateY(90deg);
            }
            li:nth-child(5){
                transform: translateX(110px) rotateY(90deg);
            }
            li:nth-child(6){
                transform: translateZ(110px);
            }
        }
    }
    
    .page1-li2{
        float: left;
        width: vw(192);
        height: vw(132);
        margin-top: vw(16);
        margin-left: vw(96);
        .page1-ul2{
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: 0.5s;
            position: relative;
            li{
                position: absolute;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                list-style: none;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
             li:first-child{
                transform: translateZ(-110px);
            }
            li:nth-child(2){
                transform: translateY(-110px) rotateX(90deg);
            }
            li:nth-child(3){
                transform: translateY(110px) rotateX(90deg);
            }
            li:nth-child(4){
                transform: translateX(-110px) rotateY(90deg);
            }
            li:nth-child(5){
                transform: translateX(110px) rotateY(90deg);
            }
            li:nth-child(6){
                transform: translateZ(110px);
            }
        }
    }
    .page1-li3{
        float: left;
        width: vw(192);
        height: vw(132);
        margin-top: vw(16);
        margin-left: vw(60);
        .page1-ul3{
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: 0.5s;
            position: relative;
            li{
                position: absolute;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                list-style: none;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
             li:first-child{
                transform: translateZ(-110px);
            }
            li:nth-child(2){
                transform: translateY(-110px) rotateX(90deg);
            }
            li:nth-child(3){
                transform: translateY(110px) rotateX(90deg);
            }
            li:nth-child(4){
                transform: translateX(-110px) rotateY(90deg);
            }
            li:nth-child(5){
                transform: translateX(110px) rotateY(90deg);
            }
            li:nth-child(6){
                transform: translateZ(110px);
            }
        }
    }
    .font2{
        margin-top: vw(50);
        width: 100%;
        height: vw(200);
        h1{
            font-size: vw(30);
            line-height: vw(49);
            color:#539dd5;
            font-weight: normal;
            letter-spacing: vw(11);
        }
    }
    .page1-bottom{
        position: absolute;
        left: 45%;
        bottom: vw(15);
        width: vw(50);
        height: vw(50);
        animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -ms-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.daren{
    animation: ybz;
}


.daren{
//  transition: 3s;
    animation: fudong 3s ease 4s 1 forwards;
}

@keyframes fudong{
    0%{
        transform: translateY(vw(-1000)) rotate(0) scale(0.5);
    }
    50%{
        transform: translateY(vw(-500)) rotate(360deg) scale(0.5);
    }
    100%{
        transform:translateY(0) rotate(360deg) scale(1);
    }
}
@keyframes xiafu{
    0%{
        transform: translate(vw(1000) );
    }
    25%{
        transform: ttranslate(0) ;
    }
}
.touming{
    animation: touming 3s ease 500ms 1 forwards;
}
@keyframes touming{
    0%{
       opacity: 0;
    }
    50%{
      opacity: 0.5;
    }
    100%{
        opacity:1;
    }
}
.fonts{
    animation: shangxian 3s ease 2300ms 1 forwards;
}
@keyframes shangxian{
    0%{transform: translateY(vw(200));opacity: 0;}
    50%{transform: translateY(vw(0)) rotateY(45deg);opacity: 0.5;}
    100%{transform:translateY(vw(0)) rotateY(0);opacity: 1;}
}
//.swing2{
//   animation: swing1 500ms ease 0s infinite alternate;
//}
@keyframes swing1{
    0%{transform: rotateZ(-30deg);}
    100%{transform: rotateZ(0);}
}
//
.flash{
    animation-iteration-count: infinite;
}
.page2{
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 0;
    font-size: 0;
    background: url(../img/page1_bgr.jpg);
    background-size: 100% 100%;
    .font1{
        position: relative;
        margin-top: vw(83);
        margin-left: vw(90);
        height:vw(77);
        width:vw(464);
        background: url(../img/page1_title.png);
        background-size: 100% 100%;
         h1{
            font-size: vw(30);
            text-align: center;
            line-height: vw(77);
            color: #539dd5;
            font-weight: normal;
            letter-spacing: vw(8);
            
        }
    }
    .page2-li1{
        width: vw(424);
        height: vw(277);
        margin-top: vw(23);
        margin-left: vw(99);
        .page2-ul1{
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: 0.5s;
            position: relative;
            li{
                position: absolute;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                list-style: none;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
             li:first-child{
                transform: translateZ(-110px);
            }
            li:nth-child(2){
                transform: translateY(-110px) rotateX(90deg);
            }
            li:nth-child(3){
                transform: translateY(110px) rotateX(90deg);
            }
            li:nth-child(4){
                transform: translateX(-110px) rotateY(90deg);
            }
            li:nth-child(5){
                transform: translateX(110px) rotateY(90deg);
            }
            li:nth-child(6){
                transform: translateZ(110px);
            }
        }
    }
    .page2-li2{
        float: left;
        width: vw(191);
        height: vw(132);
        margin-top: vw(16);
        margin-left: vw(96);
        .page2-ul2{
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: 0.5s;
            position: relative;
            li{
                position: absolute;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                list-style: none;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
             li:first-child{
                transform: translateZ(-110px);
            }
            li:nth-child(2){
                transform: translateY(-110px) rotateX(90deg);
            }
            li:nth-child(3){
                transform: translateY(110px) rotateX(90deg);
            }
            li:nth-child(4){
                transform: translateX(-110px) rotateY(90deg);
            }
            li:nth-child(5){
                transform: translateX(110px) rotateY(90deg);
            }
            li:nth-child(6){
                transform: translateZ(110px);
            }
        }
    }
    .page2-li3{
        float: left;
        width: vw(191);
        height: vw(132);
        margin-top: vw(16);
        margin-left: vw(60);
        .page2-ul3{
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: 0.5s;
            position: relative;
            li{
                position: absolute;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                list-style: none;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
             li:first-child{
                transform: translateZ(-110px);
            }
            li:nth-child(2){
                transform: translateY(-110px) rotateX(90deg);
            }
            li:nth-child(3){
                transform: translateY(110px) rotateX(90deg);
            }
            li:nth-child(4){
                transform: translateX(-110px) rotateY(90deg);
            }
            li:nth-child(5){
                transform: translateX(110px) rotateY(90deg);
            }
            li:nth-child(6){
                transform: translateZ(110px);
            }
        }
    }
    .font2{
        margin-top: vw(50);
        width: 100%;
        height: vw(200);
        h1{
            font-size: vw(30);
            line-height: vw(49);
            color:#539dd5;
            letter-spacing: vw(11);
            font-weight: normal;
        }
    }
    .page2-bottom{
        position: absolute;
        left: 45%;
        bottom: vw(15);
        width: vw(50);
        height: vw(50);
        animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -ms-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.page3{
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 0;
    font-size: 0;
    background:url(../img/page3_bgr.jpg);
    background-size: 100% 100%;
    .page3-title{
        margin-top: vw(43);
        width: 100%;
        height: vw(104);
        background-size: 100% 100%;
        .page3-title-fl{
            position: relative;
            margin-left: vw(114);
            width: vw(74);
            height: vw(67);
            float: left;
            vertical-align: top;
            img{
                width: 100%;
                height: 100%;
            }
            .page3_titles1{
                position: absolute;
                top:vw(32);
                left:vw(-98);
                width: vw(155);
                height: vw(2);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .page3-title-fr{
            position: relative;
            margin-right: vw(84);
            width: vw(74);
            height: vw(67);
            float:right;
            vertical-align: top;
            img{
                width: 100%;
                height: 100%;
            }
            .page3_titles2{
                position: absolute;
                top:vw(32);
                right:vw(-67);
                width: vw(126);
                height: vw(2);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .page3-size{
            position: absolute;
            left: 0;
            top: vw(29);
            width: 100%;
            h1{
                text-indent: vw(196);
                text-align: left;
                font-size: vw(30);
                line-height: vw(48);
                letter-spacing: vw(6);
                color: #539dd5;
            }
            h2{
                text-indent: vw(175);
                text-align: left;
                font-size: vw(30);
                line-height: vw(48);
                letter-spacing: vw(6);
                color: #539dd5;
                span{
                    letter-spacing: vw(10);
                }
            }
        }
    }
    .page3-li{
        width: vw(549);
        height: vw(350);
        margin-left: vw(54);
        .page3-ul1{
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: 0.5s;
            position: relative;
            li{
                position: absolute;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                list-style: none;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
             li:first-child{
                transform: translateZ(-110px);
            }
            li:nth-child(2){
                transform: translateY(-110px) rotateX(90deg);
            }
            li:nth-child(3){
                transform: translateY(110px) rotateX(90deg);
            }
            li:nth-child(4){
                transform: translateX(-110px) rotateY(90deg);
            }
            li:nth-child(5){
                transform: translateX(110px) rotateY(90deg);
            }
            li:nth-child(6){
                transform: translateZ(110px);
            }
        }
    }
    .page3_font{
        margin-top: vw(24);
        h1{
            padding-left: vw(60);
            font-size: vw(27);
            line-height: vw(45);
            letter-spacing: vw(3);
            text-align: left;
            color: #539dd5;
            font-weight: normal;
        }
        h2{
            padding-left: vw(60);
            font-size: vw(27);
            line-height: vw(45);
            letter-spacing: vw(6);
            text-align: left;
            color: #539dd5;
            font-weight: normal;
        }
    }
    .page3-bottom{
        position: absolute;
        left: 45%;
        bottom: vw(15);
        width: vw(50);
        height: vw(50);
        animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -ms-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.leftxian{
    animation: leftxian 1s linear;
}
.rightxian{
    animation: rightxian 1s linear;
}

@keyframes leftxian{
    0%{transform: translateX(-500px) translateY(200px);opacity: 0;}
    100%{transform:translateX(0) translateY(0);opacity: 1;}
}
@keyframes rightxian{
    0%{transform: translateX(500px) translateY(-200px);opacity: 0;}
    100%{transform:translateX(0) translateY(0);opacity: 1;}
}
.page4{
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 0;
    font-size: 0;
    background: url(../img/page4_bgr.jpg);
    background-size: 100% 100%;
    .font1{
        position: relative;
        margin-top: vw(83);
        margin-left: vw(90);
        height:vw(77);
        width:vw(464);
        background: url(../img/page1_title.png);
        background-size: 100% 100%;
         h1{
            font-size: vw(30);
            text-align: center;
            line-height: vw(77);
            color: #539dd5;
            font-weight: normal;
            letter-spacing: vw(8);
            
        }
    }
    .page4_li1{
        margin-top: vw(45);
        width:vw(454);
        height: vw(297);
        margin-left: vw(100);
        .page4_ul1{
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: 0.5s;
            position: relative;
            li{
                position: absolute;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                list-style: none;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
             li:first-child{
                transform: translateZ(-110px);
            }
            li:nth-child(2){
                transform: translateY(-110px) rotateX(90deg);
            }
            li:nth-child(3){
                transform: translateY(110px) rotateX(90deg);
            }
            li:nth-child(4){
                transform: translateX(-110px) rotateY(90deg);
            }
            li:nth-child(5){
                transform: translateX(110px) rotateY(90deg);
            }
            li:nth-child(6){
                transform: translateZ(110px);
            }
        }
    }
    .page4_font{
        width:100%;
        height: vw(381);
        margin-top: vw(50);
        h1{
            font-size: vw(30);
            line-height: vw(56);
            letter-spacing: vw(14);
            text-align: center;
            color: #539dd5;
            text-indent: vw(30);
        }
        h2{
            font-size: vw(30);
            line-height: vw(56);
            letter-spacing: vw(10);
            text-align: center;
            color: #539dd5;
            font-weight: normal;
            text-indent: vw(30);
        }
        p{
            font-size: vw(30);
            line-height: vw(56);
            letter-spacing: vw(14);
            text-align: center;
            color: #539dd5;
            text-indent: vw(30);
        }
       
    }
    .page4-bottom{
        position: absolute;
        left: 45%;
        bottom: vw(15);
        width: vw(50);
        height: vw(50);
        animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -ms-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        img{
            width: 100%;
            height: 100%;
        }
    }
}

.page5{
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 0;
    font-size: 0;
    background: url(../img/page5_bgr.jpg);
    background-size: 100% 100%;
    .font1{
        position: relative;
        margin-top: vw(66);
        margin-left: vw(90);
        height:vw(77);
        width:vw(464);
        background: url(../img/page1_title.png);
        background-size: 100% 100%;
         h1{
            font-size: vw(30);
            text-align: center;
            line-height: vw(77);
            letter-spacing: vw(20);
            color: #539dd5;
            text-indent: vw(24);
            font-weight: normal;
        }
    }
    .page5-content{
        position: absolute;
        top: vw(290);
        left: vw(136);
        width:vw(385);
        height: vw(384);
        img{
            width: 100%;
            height: 100%;
        }
        .ball{
            height: 100%;
            transform-style: preserve-3d;
            animation: mymove 10s infinite linear;
            -webkit-animation:mymove 10s infinite linear;
            -moz-animation: mymove 10s infinite linear;
            -ms-animation: mymove 10s infinite linear;
         }
        .ball>div{
            width: 100%;
            border-radius: 100%;
            height: 100%;
            position: absolute;
        }
        .ball>div img{
            width: 100%;
            height: 100%;
        }
        @-webkit-keyframes mymove {
            0%{
                transform: rotateY(0deg);
            }
            100%{
                transform: rotateY(360deg);
            }
        }
        .line-1{
            transform: rotateY(0deg);
        }
        .line-2{
            transform: rotateY(36deg);
        }
        .line-3{
            transform: rotateY(72deg);
        }
        .line-4{
             transform: rotateY(118deg);
         }
        .line-5{
            transform: rotateY(144deg);
        }
    }
    .font2{
        margin-top: vw(136);
        width: 100%;
        h1{
            line-height: vw(145);
            font-size: vw(30);
            color: #539dd5;
            text-align: center;
            letter-spacing: vw(10);
        }
    }
}
.page6{
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 0;
    font-size: 0;
    background: url(../img/page6_bgr.jpg);
    background-size: 100% 100%;
    .page6_font{
        width: 100%;
        margin-top: vw(65);
        p{
            color: #539dd5;
            font-size: vw(22);
            text-align: center;
            letter-spacing: vw(8);
            font-weight: bold;
        }
    }
    .page6_content{
        width: vw(568);
        height: vw(468);
        margin-top: vw(68);
        margin-left: vw(36);
        background: url(../img/page6_title_bgr.png);
        background-size: 100% 100%;
        .page6_title1{
            padding-top: vw(31);
             h1{
                text-align: center;
                font-size: vw(30);
                color: #539dd5;
                line-height: vw(40);
            }
            h2{
                text-align: center;
                font-size: vw(30);
                color: #539dd5;
                line-height: vw(40);
            }
        }
        .page6_title2{
            padding-top: vw(16);
            width: vw(476);
            margin: 0 auto;
             h1{
                text-align: right;
                font-size: vw(71);
                color: #539dd5;
                line-height: vw(94);
                letter-spacing: vw(38);
            }
            h2{
                text-align: right;
                font-size: vw(71);
                color: #539dd5;
                line-height: vw(94);
                letter-spacing: vw(38);
            }
        }
         .page6_title3{
            padding-top: vw(16);
            width: vw(476);
            margin: 0 auto;
             h1{
                text-align: center;
                font-size: vw(29);
                color: #539dd5;
                line-height: vw(43);
                letter-spacing: vw(12);
            }
            h2{
                text-align: center;
                font-size: vw(22);
                color: #539dd5;
                line-height: vw(26);
            }
        }
    }
     .page6-bottom{
            position: absolute;
            left: 45%;
            bottom: vw(15);
            width: vw(50);
            height: vw(50);
            animation-iteration-count:infinite;
            -webkit-animation-iteration-count:infinite;
            -ms-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            img{
                width: 100%;
                height: 100%;
            }
        }
}
